<template>
  <div  class="area-list">
    <el-select v-model="provinceCode" placeholder="请选择省" @change="getAreaList(provinceCode, 1,cityCode = '', districtCode= '', cityList = [], districtList = [])">
      <el-option
        v-for="item in provinceList"
        :key="item.areaCode"
        :label="item.areaName"
        :value="item.areaCode">
      </el-option>
    </el-select>
    <el-select v-model="cityCode" placeholder="请选择市" @change="getAreaList(cityCode,2, districtCode = '', districtList = [])">
      <el-option
        v-for="item in cityList"
        :key="item.areaCode"
        :label="item.areaName"
        :value="item.areaCode">
      </el-option>
    </el-select>
    <el-select v-model="districtCode" placeholder="请选择区" @change="updateAreaCodeList">
      <el-option
        v-for="item in districtList"
        :key="item.areaCode"
        :label="item.areaName"
        :value="item.areaCode">
      </el-option>
    </el-select>
  </div>
</template>

<script>
  export default {
    name: 'area-select',
    props: {
      // 省市区列表集合
      areaCodeList: {
        type: Array,
        default: function () {
          return []
        }
      },
      // 省市区名称集合
      areaListName: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        // 省列表
        provinceList: [],
        provinceCode: '',
        // 市列表
        cityList: [],
        cityCode: '',
        // 区列表
        districtList: [],
        districtCode: ''
      }
    },
    methods: {
      getAreaListName (areaCode, arrList) {
        let areaName = ''
        arrList.forEach(item => {
          if (item.areaCode === areaCode) {
            areaName = item.areaName
          }
        })
        return areaName
      },
      // 向父组件传值， 根据后端格式拼装成list
      updateAreaCodeList () {
        if (this.districtCode) {
          const arrCode = [this.provinceCode, this.cityCode, this.districtCode]
          this.$emit('update:areaCodeList', arrCode)
          let arrName = ''
          arrName = this.getAreaListName(this.provinceCode, this.provinceList) + ' ' + this.getAreaListName(this.cityCode, this.cityList) + ' ' + this.getAreaListName(this.districtCode, this.districtList) + ' ' + ':'
          this.$emit('update:areaListName', arrName)
        }
      },
      // 获取地址列表
      getAreaList (parentCode, level) {
        console.log(parentCode, level)
        // level 0 省 1市 2 区
        this.$http({
          url: this.$http.adornUrl(this.$API.BASE_INFO.AREA_INFO.AREA_LIST),
          method: 'get',
          params: this.$http.adornParams({
            parentCode: parentCode
          })
        }).then(({data}) => {
          switch (level) {
            case 0:
              this.provinceList = data
              // this.cityList = []
              // this.districtList = []
              break
            case 1:
              this.cityList = data
              // this.districtList = []
              break
            case 2:
              this.districtList = data
              break
          }
        })
      },
      // 编辑页面入口获取地址列表
      areaDetail (areaList) {
        // const arr = []
        // this.getAreaList
        this.provinceCode = areaList[0]
        this.cityCode = areaList[1]
        this.districtCode = areaList[2]
        this.getAreaList('', 0)
        this.getAreaList(areaList[0], 1)
        this.getAreaList(areaList[1], 2)
      },
      init () {
        this.getAreaList('', 0)
        this.provinceCode = ''
        this.cityCode = ''
        this.districtCode = ''
      }
    }
  }
</script>

<style scoped  lang="scss">
  .area-list {
    .el-select {
      width: 130px;
    }
  }
</style>
